/*
 * @Author: yixin 
 * @Date: 2019-12-06 10:31:37 
 * @Last Modified by: yixin
 * @Last Modified time: 2020-05-08 17:42:55
 * 车辆列表
 */
import React, { Component } from "react"
import { withRouter } from "react-router";
import styles from './project.less'
import Header from '@/components/header'
import { carListLocation, carListData } from '@/services'
import CarModal from '@/components/carModal'

class CarList extends Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
      listmap: {},
      mapStatus: [] // 图标点状态
    }
  }

  async componentDidMount() {
    try {
      this.map = new AMap.Map('map',{  showLabel: false,  viewMode:'3D' });
      const locationData = await carListLocation();
      if(locationData.code === 200){
        this.setState({ list: locationData.data },()=>{
          this.renderMap();
        })
      }
      const listData = await carListData();
      if(listData.code === 200){
        let listmap = {}
        listData.data.map((data,index)=>{
          if(data.bcInfo && data.bcInfo.equipCode){
            listmap[data.bcInfo.equipCode] = data
          }
        })
        this.state.list.map((item, index)=>{
          listmap[item.equipCode].index = index + 1;
        })
        this.setState({ listmap })
      }
    } catch (error) {
      console.log(error)
    }
  }

  handleClick = (e) => {
    const data = e.target.getExtData();
    setTimeout(()=>{ this.pModal && this.pModal.show(data) }, 100)
  }

  renderMap = () => {
    const point = []; //总数组
    const mapStatus = [];
    var marker;
    this.state.list.map((data, index)=>{
      if(data.location && data.location.longitude && data.location.latitude){
        point.push(new AMap.LngLat(data.location.longitude,data.location.latitude))
        mapStatus.push(this.state.list[index].state)
      } 
    })
    this.setState({ mapStatus })
    var polyline2;
    AMap.convertFrom(point, 'gps', (status, result) => {
      if (result.info === 'ok') {
        var lnglats = result.locations; // Array.<LngLat>
        lnglats.map(((data,index)=>{
          let marker = new AMap.Marker({
              position: data,  
              content: this.renderIcon(index+1),
              extData: this.state.list[index],
              clickable: true,
          });
          marker.on('click', this.handleClick)
          marker.setLabel({
            content: this.state.list[index].equipCode, //设置文本标注内容
            zooms: [15, 20],
            position: 'top',
            offset: new AMap.Pixel(-25, -20)
          });
          this.map.add(marker);
        }))
        this.map.setFitView()
      }
    });
  }

  renderIcon = (index) => {
    return `<div class=${this.state.mapStatus[index-1]==0 ? styles.icon : styles.icon_disabled}>
    ${index}
  </div>`
  }
  
  render(){
    return (
      <div className={styles.projectList}>
        <Header>车辆列表</Header>
        <div onClick={(e)=>{ e.stopPropagation() }} id="map" className={styles.map}></div>
        <img onClick={()=>{ this.map.setFitView() }} src={require('../assets/img/map/resize.png')} className={styles.resize} />
        <CarModal history={this.props.history} data={this.state.list} listmap={this.state.listmap} ref={el => { this.pModal = el }} />
      </div>
    )
  }
}
export default withRouter(CarList)